import { useState, useEffect } from 'react'

function App() {
  const [point, setPoint] = useState({ x: 0, y: 0 })

  useEffect(() => {
    const handleResize = (e: MouseEventInit): void => {
      if (!e.clientX || !e.clientY) return
      setPoint({ ...point, x: e.clientX, y: e.clientY })
    }

    window.addEventListener('mousemove', handleResize)

    // useEffect 的返回值，可以用来做一些清理性质的工作
    // effect 的返回值是可选的，返回一个清理函数，用来执行事件解绑等清理操作
    // 清理函数的执行时机
    //    1. 空数组没有依赖，组件卸载时
    //    2. 有依赖项，effect 重新执行前
    // 此时，相当于 class 组件的 componentWillUnMount 钩子函数的作用

    return () => window.removeEventListener('mousemove', handleResize)
  }, [point])

  return (
    <div>
      <h4>useEffect</h4>
      <p>
        x: {point.x}, y: {point.y}
      </p>
    </div>
  )
}

export default App
